{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}图书管理系统{% endblock %}</title>

    <!-- Bootstrap 5 CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" 
          rel="stylesheet">

    <!-- 自定义样式 -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">

    <!-- 页面级 JS（可选） -->
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation">
        <div class="container">
            <a class="navbar-brand" href="{% url 'homepage' %}">📚 Library</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
                    data-bs-target="#navbarNav" aria-controls="navbarNav" 
                    aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link {% if active_menu == 'homepage' %}active{% endif %}" 
                           href="{% url 'homepage' %}">主页</a>
                    </li>

                    {% if user.is_authenticated %}
                        {% if user.is_staff %}
                            <li class="nav-item">
                                <a class="nav-link {% if active_menu == 'add_book' %}active{% endif %}" 
                                   href="{% url 'add_book' %}">添加图书</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {% if active_menu == 'add_img' %}active{% endif %}" 
                                   href="{% url 'add_img' %}">添加图片</a>
                            </li>
                        {% endif %}

                        <li class="nav-item">
                            <a class="nav-link {% if active_menu == 'book_list' %}active{% endif %}" 
                               href="{% url 'book_list' 'all' %}">查看图书</a>
                        </li>
                    {% endif %}
                </ul>

                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" 
                               role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                欢迎，{{ user.username }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <li><a class="dropdown-item" href="{% url 'change_password' %}">修改密码</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{% url 'logout' %}">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link {% if active_menu == 'sign_up' %}active{% endif %}" 
                               href="{% url 'sign_up' %}">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if active_menu == 'login' %}active{% endif %}" 
                               href="{% url 'login' %}">登录</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 头部 -->
    <header class="bg-light py-5 border-bottom">
        <div class="container">
            <h1 class="display-4">图书管理系统</h1>
            <p class="lead">知识改变命运,阅读点亮人生</p>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container my-4">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <hr>
            <p class="mb-1">&copy; All rights reserved</p>
            <small>Powered by <a href="http://yumendy.com/" target="_blank">ychen</a></small>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle (含 Popper) -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

    <!-- 页面激活菜单脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const activeId = '{{ active_menu }}';
            if (activeId) {
                const element = document.querySelector(`[href*="${activeId}"]`);
                if (element) {
                    element.classList.add('active');
                }
            }
        });
    </script>

    <!-- 页面额外 JS -->
    {% block extra_js %}{% endblock %}
</body>
</html>